import React, { FC, useEffect, useState } from 'react';
import { Button, Modal, Table, Typography } from 'antd';
import { TableRowSelection } from 'antd/lib/table/interface';
import { ICommonDialog } from '@/interfaces/global';
import { useLevelLayoutContext } from '../../contexts/LevelLayoutContext';

const { Column } = Table;

interface AddTransferDialogProps extends ICommonDialog {}

const AddTransferDialog: FC<AddTransferDialogProps> = (props) => {
  const { visible, onClose } = props;
  const { levelSelectKeys } = useLevelLayoutContext();

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  useEffect(() => {
    if (visible) {
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
  };

  const onSubmit = () => {
    Modal.warning({
      title: '提示',
      content: '档案已经加入移交申请单\n请至【移交申请管理】内查看与维护',
      onOk() {
        onCancel();
      }
    });
  };

  /**
   * @description: 获取最高层级选中的条目
   * @return {number[]}
   */
  const getSelectKeys = (): number[] => {
    const key = Math.max(...Object.keys(levelSelectKeys).map((item) => parseInt(item)));
    return levelSelectKeys[key] || [];
  };

  /**
   * @description: 表格选中相关
   * @param {number} selectedRowKeys
   * @return {*}
   */
  const onSelectChange = (selectedKeys: number[]) => {
    const _selectedRowKeys = [...selectedRowKeys];
    if (_selectedRowKeys.indexOf(selectedKeys[0]) < 0) {
      setSelectedRowKeys(selectedKeys);
    }
  };
  const rowSelection: TableRowSelection<any> = {
    type: 'radio',
    selectedRowKeys,
    onChange: onSelectChange
  };

  /**
   * @description: 案卷列表选中条目方法
   * @param {any} record 选中的条目
   */
  const selectRow = (record: any) => {
    const _selectedRowKeys = [...selectedRowKeys];
    if (_selectedRowKeys.indexOf(record.id) < 0) {
      setSelectedRowKeys([record.id]);
    }
  };

  return (
    <Modal
      title="加入移交申请单"
      visible={visible}
      width={600}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="create"
          type="primary"
          onClick={() => {
            onSubmit();
          }}
        >
          确认加入
        </Button>
      ]}
    >
      <Typography.Paragraph>
        您已选中{getSelectKeys().length}
        条档案条目，可加入已创建的移交申请单（可在移交管理内创建）
      </Typography.Paragraph>
      <div className="title">
        <h6>选择移交申请单</h6>
        <Button type="primary" disabled>
          创建申请单
        </Button>
        <Table
          dataSource={[
            { id: 1, name: 'a' },
            { id: 2, name: 'b' }
          ]}
          rowKey="id"
          showHeader={false}
          size="small"
          rowSelection={rowSelection}
          onRow={(record) => ({
            onClick: () => {
              selectRow(record);
            }
          })}
        >
          <Column key="name" dataIndex="name" />
        </Table>
      </div>
    </Modal>
  );
};

export default AddTransferDialog;
